<template>
  <!--删除职位-->
  <d-Modal :show.sync="showImport" >
    <span slot="header">Delete</span>
    <div  slot="body" style="padding:40px 0 0 40px">
         <div class="dayhr_import clearfix">
              <dl class="dayhr_import_dl clearfix">
                    <dt class="list_number">1</dt>
                    <dt class="list_title"><strong>Import Template</strong> <span>Click on button to download template and fill in data</span></dt>
                    <dd>
                          Select Template：
                          <div class="dayhr_drop_select" id="download_excel_templates" data-name="modelId" style="display: inline-block;vertical-align: middle;margin-right: 7px;margin-left: 14px;"></div>
                          <div class="base_import_infomation_show_btn iconfont">
                                &#xe614;
                                <div class="base_import_infomation_show">
                                  Note: the current interface does not require special templates, as long as the import data can be specified to system identification.
                                  </div>
                            </div>
                          <div class="operation_templates_description" style="position: relative;">
                                Export Existing Data：
                                <div class="base_export_excel_switch">
                                      <d-switch :value='existSwitch'></d-switch>
                                  </div>
                            </div>
                          <input type="button" id="download_excel" class="flat-button flat-medium flat-yellow"  value="Get Template" @click="getTemplate"/>
                      </dd>
                </dl>
              <dl class="dayhr_import_dl clearfix">
                    <dt class="list_number">2</dt>
                    <dt class="list_title"><strong>Upload</strong><span>Click on button to upload form.</span></dt>
                    <dd>
                          <div id="upload_file_excel" class="clearfix">
                                <form id="upload_file_excel_btns" enctype="multipart/form-data" method="post">
                                      <button id="upload_file_excel_selectFile" class="flat-button flat-medium flat-blue pick_btn">Select File</button>
                                      <input type="file" name="file" id="upload_file_excel_file"/>
                                      <div class="upload_file_description">
                                            Would you like to delete existing data in the system?：
                                        </div>
                                      <div class="upload_file_description upload_file_description2">
                                            Recover Existing Data：
                                            <div class="base_export_excel_switch">
                                                <d-switch :value='recoverSwitch'></d-switch>
                                            </div>
                                        </div>
                                      <button id="upload_file_excel_startUpload" class="flat-button flat-medium flat-yellow">Upload</button>
                                      <input type="text" id="upload_file_excel_input" readonly />
                                  </form>
                                <!--用来存放文件信息-->
                                <div id="upload_file_list" class="uploader-list"></div>
                                <!--屏蔽选择上传-->
                                <div id="upload_file_btns_disabled"></div>
                            </div>
                      </dd>
                </dl>
              <dl class="dayhr_import_dl clearfix">
                    <dt class="list_number">3</dt>
                    <dt class="list_title"><strong>Check Data</strong><span>System will check if the data is correct.</span></dt>
                    <dd>
                      </dd>
                </dl>
              <dl class="dayhr_import_dl clearfix" id="dayhr_import_complete">
                    <dt class="list_number">4</dt>
                    <dt class="list_result">End</dt>
                    <dt class="list_title"><strong>Done</strong></dt>
                    <dd>
                      </dd>
                </dl>
          </div>
    </div>
    <div class="btn_group" slot="footer">
    </div>
  </d-Modal>
</template>

<script>
  import dModal from './Modal'
  import dSwitch from './Switch'
  require("../../assets/js/plugins/artDialog/ui-dialog.css");
  require("../../assets/js/plugins/artDialog/dialog-plus");
  import {del,getImportModelByFuncId,checkSessionTimeout} from '../../store/action'
  var dayhrDropSelect = require("../../assets/js/plugins/dayhrDropSelect/dayhrDropSelect"); //下拉
    export default{
        components:{
          dModal,
          dSwitch
        },
        ready:function () {
          this.$watch('showImport',function (value) {
            if(value){
              this.$nextTick(function(){
               this.init();
              })
            }
          });
        },
        data:function () {
          return{
            selectData:null,
            recoverSwitch:{
              checked:false,
              size:'small'
            },
            existSwitch:{
              checked:false,
               size:'small'
            }
          }
        },
        methods: {
          init:function(){
            this.initDropSelect();
            this.initWebuploader()
          },
          initDropSelect:function(){
            var t = this;
            var aDropData = [];
            t.getImportModelByFuncId({funcId:t.importOption.funcId,infoSetId:t.importOption.infoSetId},function(data){
                if(data.maps&& data.maps.length){
                  for(var i=0;i<data.maps.length;i++){
                      var item = data.maps[i];
                      aDropData.push({id:item.model_id,name:item.model_name,data:item});
                  }
                 }
                var oDrop = new dayhrDropSelect({
                    id: "download_excel_templates",
                    width: 180,
                    maxHeight: 250,
                    data: aDropData,
                    name: "modelId",
                    onSelected:function(oSelect){
                        var _oData = oSelect.node.data
                        t.selectData = _oData;//把当前选中的数据缓存起来

                        $(".base_import_infomation_show").text(_oData.model_instruction);
                    }
                });
                t.oDrop = oDrop;
                if(aDropData.length){
                    oDrop.setValue(aDropData[0].id);
                }
            })
        },
        getTemplate:function(){
           var t = this;
           t.checkSessionTimeout({},function(){
            var sOperation = t.existSwitch.checked ? "update":"delete";
            var sModelId = "";
            if(t.oDrop){
                sModelId = t.oDrop.getValue();
            }
            //如果是码表就多传一个参数ct_set_id

            var sUrl = "/route/"+t.importOption.infoSetId+"/downloadImportExcel.do?funcId="+ t.importOption.funcId+"&infoSetId="+ t.importOption.infoSetId+"&modelId="+sModelId+"&operationType="+sOperation+((t.importOption.infoSetId=="ct" && t.importOption.navigationId)?("&ct_set_id="+t.importOption.navigationId):"");
            //如果列表有导航
            if(t.importOption.navigationCondition){
                sUrl += "&navigationCondition="+JSON.stringify({
                        key:t.importOption.navigationCondition.key
                        ,value:t.importOption.navigationCondition.value
                    });
            }
            location.href = encodeURI(sUrl);

           });
        },
          /**
         * 格式验证
         * */
        fileCheck:function(str){
            if (str == "") {
                $("#upload_file_excel_input").val("");
                layer.msg("请上传一个Excel文件", {offset: 0,shift:6});
                return false;
            } else if (!/\.(xls|xlsx|XLS|XLSX)$/.test(str)) {
                layer.msg("文件类型必须是Excel文件类型", {offset: 0,shift:6});
                str = "";
                return false;
            }
            return true;
        },
        /**
         * 初始化上传
         * */
        initWebuploader:function(){
            var t = this;
            var oPostData = {infoSetId: t.importOption.infoSetId};
            var $form = $("#upload_file_excel_btns");
            var url ='route/'+t.importOption.infoSetId+'/importData.do';
            $form.attr("action",url);
            //如果是码表就多传一个参数ct_set_id
            if(t.importOption.infoSetId=="ct" && t.importOption.navigationId){oPostData.ct_set_id = t.importOption.navigationId;}
            //选择文件事件
            $("#upload_file_excel_file").change(function(){
                if(t.fileCheck($(this).val())){
                    $("#upload_file_excel_input").val($(this).val());
                }else{
                    $(this).val("");
                }
            });
            //上传按钮变色
            $("#upload_file_excel_file").hover(function(){
                $("#upload_file_excel_selectFile").css({background:"#2065ae"});
            },function(){
                $("#upload_file_excel_selectFile").css({background:"#36a3ff"});
            });
            //开始上传
            $("#upload_file_excel_startUpload").click(function(){
                if($("#upload_file_excel_file").val() == ""){
                    layer.msg("请先选择一个Excel文件", {offset: 0,shift:6});
                    return false;
                }
                $("#upload_file_btns_disabled").show(); //挡住屏蔽选择上传
                //loading
                t.loadingDialog =  dialog({
                    fixed: true,
                    content:'<div style="text-align:center;line-height: 20px;height:40px">Checking data and importing data, please wait...</div>'
                }).showModal();
                //模拟表单上传接口
                var sModelId = "";
                if(t.oDrop){
                    sModelId = t.oDrop.getValue();
                }
                oPostData.modelId = sModelId;
                oPostData.allowDelete = !t.recoverSwitch.checked?"1":"0";
                oPostData.allowUpdate = t.recoverSwitch.checked?"1":"0";;


                //html5上传方法
                var oFormData = new FormData();
                for(var i in oPostData){
                    oFormData.append(i, oPostData[i]);
                }
                oFormData.append('file', $('#upload_file_excel_file')[0].files[0]);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: oFormData,
                    processData: false,  // 告诉jQuery不要去处理发送的数据
                    contentType: false  // 告诉jQuery不要去设置Content-Type请求头
                }).done(function(data){
                    t.loadingDialog && t.loadingDialog.close().remove(); //隐藏loading
                    var _html = "";
                    if(data.result == "true"){
                        if(data.failNum == "0" && data.successNum){
                            _html = 'Import success'+data.successNum+'data<br/>';
                        }else{
                            _html = '<div style="display: inline;vertical-align: middle;color: red;">信息导入完成，成功<span style="color:#333;">'+data.successNum+'</span>条，失败'+data.failNum+'条</div>，<br/>继续操作请点击<a target="_blank"  class="flat-button flat-medium flat-blue" href="'+(gMain.apiBasePath?gMain.apiBasePath:gMain.basePath)+'route/'+t.infoSetId+'/downfilelog.do?fileName='+data.errorUrl+'">下载出错信息</a>';
                        }
                    }else if(data.result == "false"){
                        layer.msg(data.resultDesc, {offset: 0,shift:6}); //给个错误提示
                        //如果登陆会话已过期，就弹出登陆框
                        if(data.statusCode && data.statusCode == "50"){
                            Ajax.showLoginBox();
                        }
                    }else{
                        _html = "<div style='display: inline;vertical-align: middle;color: red;'>import error"+(data.resultDesc?"，"+data.resultDesc:"") + "</div><br/>";
                    }
                    _html += '<a href="javascript:void(0)" id="base_look_back" class="flat-button flat-medium flat-blue">return</a><a href="javascript:void(0)" id="upload_again" class="flat-button flat-medium flat-blue">continue import</a>';
                    $("#dayhr_import_complete").find("dd").html(_html); //显示完成结果

                    $("#base_look_back").off("click").on("click",function(){
                        t.d && t.d.close().remove();
                        t.options.mmg.load();
                        //如果是导入组织、导入职务类型，就更新数导航
                        if(t.infoSetId == "org_list" || t.infoSetId == "hr_job_family"){
                            t.options.oMetaData.quickMenuNav.updateTreeDataAndDom(); //重载树导航
                        }
                    });
                });

                return false;
            });

            //重新上传
            $("#dayhr_import_complete").on("click","#upload_again",function(){
                $("#upload_file_btns_disabled").hide(); //移除遮罩
                $("#dayhr_import_complete").find("dd").html(""); //清空完成结果
                $("#upload_file_excel_input,#upload_file_excel_file").val(""); //清空表单值
            });

          }
        },
        vuex:{
          actions:{
            del,
            getImportModelByFuncId,
            checkSessionTimeout
          }
        },
        props:{
          importOption:{
            type:Object,
            default:{

            }
          },
          showImport:{
            type:Boolean,
          }
        }
    }
</script>
<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "../../assets/css/variable";
  /*导入Excel*/
  .dayhr_import{
    border-left: 1px dashed $activeColor;
    padding-left: 41px;
    width: 485px;
    height: 587px;
  }
  .dayhr_import_dl{  position: relative;  margin-bottom: 30px;}
  .dayhr_import_dl dt.list_title{}
  .dayhr_import_dl dt.list_title strong{
    font-size: 18px;
    color: #2F2F2F;
    margin-right: 15px;
  }
  .dayhr_import_dl dt.list_title span{ }
  .dayhr_import_dl dt.list_number{  position: absolute;  left: -62px;  background: $activeColor;  color: #fff;  width: 40px;  height: 40px;  border-radius: 50%;  line-height: 40px;  text-align: center;  font-size: 20px;  top: -9px;}
  .dayhr_import_dl dt.list_result{
    position: absolute;
    left: -54px;
    top: 31px;
    background: #fff;
    height: 86px;
    line-height: 54px;
    color: #ccc;
  }
  .dayhr_import_dl dd{
    line-height: 36px;
    margin-top: 10px;
  }
  .dayhr_import_dl dd .flat-button{
    width: 120px;
    height: 34px;
    line-height: 34px;
    background-color: #f57c00;
    color: #fff;
    border-radius: 3px;
    border: none;
  }
  .dayhr_import_dl dd .flat-button.pick_btn{
    background-color: $activeColor;
  }
  .dayhr_import_dl dd .flat-button:hover{
    opacity: 5;
  }

  .dayhr_import .base_export_excel_switch{
    display: inline-block;
    vertical-align: middle;
  }
  #upload_file_btns_disabled{
    position: absolute;
    left: 0px;
    top: 32px;
    height:170px;
    width: 399px;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: none;
  }
  #upload_file_excel_btns{
    position: relative;
    height: 161px;
  }
  #upload_file_excel_file{
    width: 93px;
    height: 34px;    background: none;
    opacity: 0;    filter: alpha(opacity=0);
    position: absolute;
    left: 301px;
    top: 0;
    cursor: pointer;
  }
  #upload_file_excel_selectFile{
    position: absolute;
    left: 301px;    top: 0;
  }
  #upload_file_excel_startUpload{
    position: absolute;
    top: 131px;
    left: 0;
  }
  #upload_file_excel_input{
    position: absolute;
    left: 0;
    top: 0;
    width: 286px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #cdcdcd;
    padding: 0 5px;
  }
  .upload_file_description{
    position: absolute;
    top: 44px;
  }
  .upload_file_description2{
    top: 82px;
  }
  #dayhr_import_complete .flat-button{
    line-height: 14px;

  }
  .base_import_infomation_show_btn{
    font-size:22px!important;
    color: #36A3FF;
    cursor: pointer;
    display: inline;
  }
  .base_import_infomation_show{
    display: none;
    position: absolute;
    left: 161px;
    top: 75px;
    background-color: #EAEAEA;
    color: #333;
    border-radius: 4px;
    padding: 10px;
    z-index: 9;
    line-height: 26px;
    font-size: 12px;
    font-family: "微软雅黑";
    -webkit-font-smoothing: none;
    -webkit-text-stroke-width: 0px;
    -moz-osx-font-smoothing: none;
    cursor: default;
  }
  .base_import_infomation_show:before{
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 11px solid rgb(234, 234, 234);
    top: -11px;
    left: 19px;
    border-radius: 0px;
  }
  .base_import_infomation_show_btn:hover .base_import_infomation_show{
    display: block;
  }

  /*Excel导入结束*/

</style>
